@include('admin.header')

<style type="text/css">
  .opartion {
    width: 350px;
  }

  .pagination {
    list-style: none;
    float: right;
  }

  .pagination li {
    float: left;
    padding-left: 5px;
    padding-right: 5px;
  }

  .input_search {
    margin-top: 10px;
  }

  .product_error,.node_error,.verify_error {
    color: red;
  }

</style>

<div class="wrap">
  <div class="margin-bottom-20">
    <form action="" method="post">
        <div class="cl pd-5 bg-1 bk-gray mt-20">
          <span class="text-c">
            <label for="product_name">产品名称：</label>
            <input type="text" name="product_name" id="product_name" placeholder="请填写产品名称" style="width:400px" class="input-text input_search">
            <span class="product_error"></span>
          </span>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20" name="product">
          <span class="text-c" name="product_list">
            
          </span>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
          <span class="text-c">
            <label for="node_id">用户名：</label>
            <input type="number" name="node_id" id="node_id" placeholder="请填写用户名" style="width:400px" class="input-text input_search">
            <span class="node_error"></span>
          </span>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20" name="node">
          <span class="text-c" name="node_list">
            
          </span>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
          <span class="text-c">
            <button name="confirm_bind" id="search" class="btn btn-success user_search"><i class="Hui-iconfont"></i> 绑定</button>
          </span>
        </div>
    </form>
  </div>

  <script src="/static/admin/js/jquery.js"></script>
  <script type="text/javascript" src="/static/admin/js/layer/layer.js"></script>
  <script type="text/javascript" src="/static/admin/js/layer/dialog.js"></script>
  <script type="text/javascript">

  //确认绑定
  $("button[name='confirm_bind']").click(function() {
    //获取表单数据
    var product_id  = $('input[name=product_name]').attr('_id');
    var node_id     = $('input[name=node_id]').attr('_id');
    
    //数据非空校验
    if(!check('product_name')) { //产品ID号非空校验
      $('.product_error').text('产品名称不能为空');
      return false;
    }else {
      $('.product_error').text('');
    }
    if(!check('node_id')) { //用户ID号非空校验
      $('.node_error').text('用户名不能为空');
      return false;
    }else {
      $('.node_error').text('');
    }

    layer.confirm('确定要绑定产品与用户的关系吗？', {
      btn: ['确定','否']
    }, function(){
      //发送异步请求
      $.post(
        "{{url('dividend/bind_relation')}}",
        {'product_id':product_id,'node_id':node_id},
        function(data) {
          console.log(data);
          if(data == 1) {
            dialog.success('绑定成功',"{{url('dividend/bind_relation')}}");
          }else if(data == 2) {
            dialog.error('信息填写不完整');
          }else {
            dialog.error('绑定失败');
          }
        }
      );
    });

    return false;
  });

  //非空校验
  function check(attr_name) {
    if(!attr_name) {
      return false;
    }

    var attr_val = $('input[name='+attr_name+']').val();
    if(!attr_val || typeof(attr_val) == 'undefined') {
      return false;
    }else {
      return true;
    }
  }

  //产品名称非空校验
  $('input[name=product_name]').blur(function() { //失去焦点时
    if(!check('product_name')) {
      $('.product_error').text('产品名称不能为空');
    }else {
      // $('span[name=product_list]').children().hide();
      $('.product_error').text('');
    }
  });
  
  $('input[name=product_name]').focus(function() { //得到焦点时
    $('span[name=product_list]').children().show();
    $('.product_error').text('');
  });

  //产品名称模糊搜索
  $('input[name=product_name]').keyup(function(event) {
    var product_name = $('input[name=product_name]').val();
      if(product_name) {
        setTimeout(function(){
          $.post(
            "{{url('dividend/get_product')}}",
            {'product_name':product_name},
            function(data) {
              if(data != 0) {
                $('span[name=product_list]').children().remove();
                for(var i=0; i<data.length; i++) {
                  $('span[name=product_list]').append('<span id="'+data[i].product_id+'" style="color:blue;cursor:pointer;display:block;padding:3px;" onclick="select_product('+data[i].product_id+',\''+data[i].product_name+'\''+');">'+data[i].product_name+'</span><br/>');
                }
              }
            },'JSON'
          );
        },200);
      }
  });

  function select_product(product_id,product_name)  {
    $('input[name=product_name]').val(product_name);
    $('input[name=product_name]').attr('_id',product_id);
    $('span[name=product_list]').children().hide();
  }

  //用户ID号非空校验
  $('input[name=node_id]').blur(function() { //失去焦点时
    if(!check('node_id')) {
      $('.node_error').text('用户名不能为空');
    }else {
      // $('span[name=node_list]').children().hide();
      $('.node_error').text('');
    }
  });

  $('input[name=node_id]').focus(function() { //得到焦点时
    $('span[name=node_list]').children().show();
    $('.node_error').text('');
  });

  //用户名模糊搜索
  $('input[name=node_id]').keyup(function(event) {
    var node_id = $('input[name=node_id]').val();
    console.log(node_id);
    if(node_id) {
      setTimeout(function(){
        $.post(
          "{{url('dividend/get_node')}}",
          {'nodename':node_id},
          function(data) {
            if(data != 0) {
              $('span[name=node_list]').children().remove();
              for(var i=0; i<data.length; i++) {
                $('span[name=node_list]').append('<span id="'+data[i].nodeid+'" style="color:blue;cursor:pointer;display:block;padding:3px;" onclick="select_node('+data[i].nodeid+',\''+data[i].nodename+'\''+');">'+data[i].nodename+'</span><br/>');
              }
            }
          },'JSON'
        );
      },200);
    }
  });

  //选择用户名
  function select_node(nodeid,nodename) {
    $('input[name=node_id]').val(nodename);
    $('input[name=node_id]').attr('_id',nodeid);
    $('span[name=node_list]').children().hide();
  }

  </script>